import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import {
  Database,
  FolderOpen,
  Send,
  BarChart3,
  Activity,
  Zap,
  Shield,
  Gauge,
  Sparkles,
  TrendingUp,
  Clock,
  Users
} from 'lucide-react'
import { kafkaApi } from '@/services/kafka'
import { useKafkaStore } from '@/stores/kafkaStore'

const features = [
  {
    icon: Zap,
    title: '实时流式处理',
    description: '零内存积累的流式架构，支持百万级消息/秒处理',
    color: 'text-yellow-600 bg-gradient-to-br from-yellow-100 to-yellow-200',
    gradient: 'from-yellow-400 to-orange-500'
  },
  {
    icon: Activity,
    title: 'WebSocket推送',
    description: '毫秒级实时数据推送，替代传统轮询方式',
    color: 'text-green-600 bg-gradient-to-br from-green-100 to-green-200',
    gradient: 'from-green-400 to-blue-500'
  },
  {
    icon: Gauge,
    title: '虚拟滚动',
    description: '支持百万行数据流畅展示，60FPS渲染性能',
    color: 'text-blue-600 bg-gradient-to-br from-blue-100 to-blue-200',
    gradient: 'from-blue-400 to-purple-500'
  },
  {
    icon: Shield,
    title: '高可用架构',
    description: '自动重连、背压控制、故障恢复机制',
    color: 'text-purple-600 bg-gradient-to-br from-purple-100 to-purple-200',
    gradient: 'from-purple-400 to-pink-500'
  }
]

const quickActions = [
  {
    title: '数据查看器',
    description: '实时查看Kafka消息流',
    icon: Database,
    href: '/data-viewer',
    gradient: 'bg-gradient-to-br from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700',
    iconBg: 'bg-blue-100',
    iconColor: 'text-blue-600'
  },
  {
    title: 'Topic管理',
    description: '创建、删除、配置Topic',
    icon: FolderOpen,
    href: '/topic-manager',
    gradient: 'bg-gradient-to-br from-green-500 to-green-600 hover:from-green-600 hover:to-green-700',
    iconBg: 'bg-green-100',
    iconColor: 'text-green-600'
  },
  {
    title: '消息生产',
    description: '发送测试消息到Topic',
    icon: Send,
    href: '/message-producer',
    gradient: 'bg-gradient-to-br from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700',
    iconBg: 'bg-purple-100',
    iconColor: 'text-purple-600'
  },
  {
    title: '监控面板',
    description: '集群状态和性能监控',
    icon: BarChart3,
    href: '/monitor',
    gradient: 'bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700',
    iconBg: 'bg-orange-100',
    iconColor: 'text-orange-600'
  }
]

export default function Home() {
  const [stats, setStats] = useState({
    topics: 0,
    brokers: 0,
    connected: false
  })
  
  const { setConnectionStatus, setTopics } = useKafkaStore()

  useEffect(() => {
    const checkConnection = async () => {
      try {
        const result = await kafkaApi.testConnection()
        if (result.success) {
          setConnectionStatus('已连接', true)
          setStats(prev => ({ ...prev, connected: true, brokers: result.brokers }))
          
          // 获取Topic列表
          const topics = await kafkaApi.getTopics()
          setTopics(topics)
          setStats(prev => ({ ...prev, topics: topics.length }))
        } else {
          setConnectionStatus('连接失败', false)
        }
      } catch (error) {
        setConnectionStatus('连接失败', false)
      }
    }

    checkConnection()
  }, [setConnectionStatus, setTopics])

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-blue-50">
      {/* 背景装饰 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-80 h-80 bg-gradient-to-br from-blue-400/20 to-purple-600/20 rounded-full blur-3xl animate-float"></div>
        <div className="absolute -bottom-40 -left-40 w-80 h-80 bg-gradient-to-br from-green-400/20 to-blue-600/20 rounded-full blur-3xl animate-float" style={{ animationDelay: '1s' }}></div>
        <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-gradient-to-br from-purple-400/10 to-pink-600/10 rounded-full blur-3xl animate-pulse-slow"></div>
      </div>

      <div className="relative space-y-12 animate-fade-in">
        {/* 欢迎区域 */}
        <div className="text-center py-16 relative">
          <div className="absolute top-8 left-1/2 transform -translate-x-1/2">
            <Sparkles className="w-8 h-8 text-yellow-400 animate-pulse-slow" />
          </div>
          <h1 className="text-6xl md:text-7xl font-bold gradient-text mb-8 animate-slide-up">
            欢迎使用 kmsg-ui
          </h1>
          <div className="relative">
            <p className="text-2xl text-gray-600 max-w-5xl mx-auto leading-relaxed animate-slide-up mb-6">
              高性能实时Kafka数据观测平台
            </p>
            <p className="text-lg text-gray-500 max-w-4xl mx-auto leading-relaxed animate-slide-up">
              基于流式处理架构，提供WebSocket实时数据推送，支持海量数据的高效渲染和分析
            </p>
          </div>

          {/* 装饰性元素 */}
          <div className="flex justify-center mt-8 space-x-4">
            <div className="w-2 h-2 bg-blue-400 rounded-full animate-pulse"></div>
            <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }}></div>
            <div className="w-2 h-2 bg-purple-400 rounded-full animate-pulse" style={{ animationDelay: '1s' }}></div>
          </div>
        </div>

        {/* 状态卡片 */}
        <div className="relative px-6">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="card hover-lift-strong animate-scale-in glass-strong border-0 bg-white/80 backdrop-blur-sm">
              <div className="card-content relative overflow-hidden">
                <div className="flex items-center justify-between">
                  <div className="z-10">
                    <div className="flex items-center space-x-2 mb-2">
                      <Activity className="w-4 h-4 text-gray-500" />
                      <p className="text-sm font-medium text-gray-600">连接状态</p>
                    </div>
                    <p className={`text-3xl font-bold ${
                      stats.connected ? 'text-green-600' : 'text-red-600'
                    }`}>
                      {stats.connected ? '已连接' : '未连接'}
                    </p>
                    <div className="flex items-center mt-2 space-x-1">
                      <div className={`w-2 h-2 rounded-full ${
                        stats.connected ? 'bg-green-400 animate-pulse' : 'bg-red-400'
                      }`}></div>
                      <span className="text-xs text-gray-500">
                        {stats.connected ? '实时连接' : '连接断开'}
                      </span>
                    </div>
                  </div>
                  <div className={`p-6 rounded-2xl shadow-xl ${
                    stats.connected
                      ? 'bg-gradient-to-br from-green-400 to-green-600 hover-glow'
                      : 'bg-gradient-to-br from-red-400 to-red-600'
                  } transition-all duration-300`}>
                    <Activity className="h-8 w-8 text-white" />
                  </div>
                </div>
                {/* 背景装饰 */}
                <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-green-200/30 to-blue-200/30 rounded-full blur-xl"></div>
              </div>
            </div>

            <div className="card hover-lift-strong animate-scale-in glass-strong border-0 bg-white/80 backdrop-blur-sm" style={{ animationDelay: '0.1s' }}>
              <div className="card-content relative overflow-hidden">
                <div className="flex items-center justify-between">
                  <div className="z-10">
                    <div className="flex items-center space-x-2 mb-2">
                      <Database className="w-4 h-4 text-gray-500" />
                      <p className="text-sm font-medium text-gray-600">Broker数量</p>
                    </div>
                    <p className="text-3xl font-bold text-gray-900">{stats.brokers}</p>
                    <div className="flex items-center mt-2 space-x-1">
                      <TrendingUp className="w-3 h-3 text-blue-500" />
                      <span className="text-xs text-gray-500">集群节点</span>
                    </div>
                  </div>
                  <div className="p-6 rounded-2xl bg-gradient-to-br from-blue-400 to-blue-600 shadow-xl hover-glow transition-all duration-300">
                    <Database className="h-8 w-8 text-white" />
                  </div>
                </div>
                <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-blue-200/30 to-purple-200/30 rounded-full blur-xl"></div>
              </div>
            </div>

            <div className="card hover-lift-strong animate-scale-in glass-strong border-0 bg-white/80 backdrop-blur-sm" style={{ animationDelay: '0.2s' }}>
              <div className="card-content relative overflow-hidden">
                <div className="flex items-center justify-between">
                  <div className="z-10">
                    <div className="flex items-center space-x-2 mb-2">
                      <FolderOpen className="w-4 h-4 text-gray-500" />
                      <p className="text-sm font-medium text-gray-600">Topic数量</p>
                    </div>
                    <p className="text-3xl font-bold text-gray-900">{stats.topics}</p>
                    <div className="flex items-center mt-2 space-x-1">
                      <Users className="w-3 h-3 text-purple-500" />
                      <span className="text-xs text-gray-500">数据主题</span>
                    </div>
                  </div>
                  <div className="p-6 rounded-2xl bg-gradient-to-br from-purple-400 to-purple-600 shadow-xl hover-glow transition-all duration-300">
                    <FolderOpen className="h-8 w-8 text-white" />
                  </div>
                </div>
                <div className="absolute -top-4 -right-4 w-24 h-24 bg-gradient-to-br from-purple-200/30 to-pink-200/30 rounded-full blur-xl"></div>
              </div>
            </div>
          </div>
        </div>

        {/* 核心特性 */}
        <div className="relative px-6">
          <div className="card glass-strong border-0 bg-white/60 backdrop-blur-md hover-lift">
            <div className="card-header bg-gradient-to-r from-gray-50/80 to-blue-50/80 backdrop-blur-sm">
              <div className="flex items-center space-x-3">
                <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600">
                  <Sparkles className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h2 className="card-title text-2xl">核心特性</h2>
                  <p className="card-description text-base">
                    专为高性能实时数据处理而设计的现代化架构
                  </p>
                </div>
              </div>
            </div>
            <div className="card-content">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {features.map((feature, index) => (
                  <div key={index} className="text-center group hover-lift-strong animate-slide-up relative" style={{ animationDelay: `${index * 0.1}s` }}>
                    <div className="relative">
                      <div className={`inline-flex p-6 rounded-2xl ${feature.color} mb-6 shadow-xl group-hover:shadow-2xl transition-all duration-500 relative overflow-hidden`}>
                        <feature.icon className="h-8 w-8 group-hover:scale-125 group-hover:rotate-12 transition-all duration-500 z-10" />
                        {/* 渐变背景 */}
                        <div className={`absolute inset-0 bg-gradient-to-br ${feature.gradient} opacity-0 group-hover:opacity-20 transition-opacity duration-500`}></div>
                        {/* 光晕效果 */}
                        <div className="absolute inset-0 rounded-2xl bg-white/20 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                      </div>
                      {/* 装饰性光点 */}
                      <div className="absolute -top-2 -right-2 w-4 h-4 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-500 animate-pulse"></div>
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:from-blue-600 group-hover:to-purple-600 group-hover:bg-clip-text transition-all duration-300">
                      {feature.title}
                    </h3>
                    <p className="text-sm text-gray-600 leading-relaxed group-hover:text-gray-700 transition-colors duration-300">
                      {feature.description}
                    </p>
                    {/* 底部装饰线 */}
                    <div className="mt-4 h-1 w-0 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full mx-auto group-hover:w-full transition-all duration-500"></div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>

        {/* 快速操作 */}
        <div className="relative px-6 pb-16">
          <div className="card glass-strong border-0 bg-white/60 backdrop-blur-md hover-lift">
            <div className="card-header bg-gradient-to-r from-gray-50/80 to-purple-50/80 backdrop-blur-sm">
              <div className="flex items-center space-x-3">
                <div className="p-2 rounded-lg bg-gradient-to-br from-purple-500 to-pink-600">
                  <Zap className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h2 className="card-title text-2xl">快速开始</h2>
                  <p className="card-description text-base">
                    选择一个功能模块开始使用
                  </p>
                </div>
              </div>
            </div>
            <div className="card-content">
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                {quickActions.map((action, index) => (
                  <Link
                    key={index}
                    to={action.href}
                    className={`${action.gradient} text-white p-8 rounded-2xl transition-all duration-500 group hover:shadow-2xl hover-lift-strong animate-slide-up relative overflow-hidden`}
                    style={{ animationDelay: `${index * 0.1}s` }}
                  >
                    {/* 背景装饰 */}
                    <div className="absolute inset-0 bg-white/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                    <div className="absolute -top-4 -right-4 w-24 h-24 bg-white/10 rounded-full blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>

                    {/* 图标背景 */}
                    <div className={`inline-flex p-4 rounded-xl ${action.iconBg} mb-6 group-hover:scale-110 group-hover:rotate-6 transition-all duration-500 relative z-10`}>
                      <action.icon className={`h-8 w-8 ${action.iconColor} group-hover:scale-125 transition-all duration-500`} />
                    </div>

                    {/* 主图标 */}
                    <action.icon className="h-10 w-10 mb-6 group-hover:scale-125 group-hover:rotate-12 transition-all duration-500 relative z-10" />

                    <div className="relative z-10">
                      <h3 className="text-xl font-bold mb-3 group-hover:text-white transition-colors duration-300">{action.title}</h3>
                      <p className="text-sm opacity-90 group-hover:opacity-100 transition-opacity duration-300 leading-relaxed">{action.description}</p>
                    </div>

                    {/* 悬浮时的装饰元素 */}
                    <div className="absolute bottom-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity duration-500">
                      <div className="w-2 h-2 bg-white rounded-full animate-pulse"></div>
                    </div>

                    {/* 光晕效果 */}
                    <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-white/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                  </Link>
                ))}
              </div>
            </div>
          </div>

          {/* 底部装饰 */}
          <div className="flex justify-center mt-12 space-x-2">
            <div className="w-16 h-1 bg-gradient-to-r from-blue-400 to-purple-600 rounded-full"></div>
            <div className="w-8 h-1 bg-gradient-to-r from-purple-400 to-pink-600 rounded-full"></div>
            <div className="w-4 h-1 bg-gradient-to-r from-pink-400 to-red-600 rounded-full"></div>
          </div>
        </div>
      </div>
    </div>
  )
}
